<script setup lang="ts">
import { computed } from 'vue';

import { LinkOutlined } from '@ant-design/icons-vue';

import { indlyfor1688todystor } from '#/store';

const props = defineProps<{
  item?: any;
}>();

const indlyfor1688tody = indlyfor1688todystor();

// const { selectProducts } = inject('selectProducts') as any;
// const showAddBox = ref(false);
const selectStatus = computed(() => {
  return indlyfor1688tody.selectProducts.includes(props.item.offerId);
});
const setSelectList = (e: any) => {
  if (e) {
    indlyfor1688tody.selectProducts.push(props.item.offerId);
  } else {
    indlyfor1688tody.selectProducts = indlyfor1688tody.selectProducts.filter(
      (item: any) => item !== props.item.offerId,
    );
  }
};
function goLickDetail(url: string) {
  window.open(url);
}

function addProduct(item: any) {
  indlyfor1688tody.openshowAddBox([item.offerId]);
  // showAddBox.value = true;
  // get1688ToDouyinProductDetailFuc([props.item.itemId]);
}
</script>

<template>
  <div
    :class="selectStatus ? 'border-amber-500' : ''"
    class="w-48 overflow-hidden rounded border border-gray-200 transition duration-150 hover:shadow-md"
  >
    <div class="relative" @click="() => setSelectList(!selectStatus)">
      <img
        :src="item.image"
        alt=""
        class="h-48 w-48 cursor-pointer object-cover"
      />
      <div class="absolute left-5 top-5">
        <a-checkbox
          v-model:checked="selectStatus"
          @change="(e: any) => setSelectList(e.target.checked)"
        />
      </div>
    </div>
    <a-space class="w-full px-2 py-2" direction="vertical">
      <div class="flex justify-between">
        <a-space :size="5">
          <span class="text-xs text-gray-500">进货价</span>
          <div class="text-base font-bold text-red-500">￥{{ item.price }}</div>
        </a-space>
        <a-space :size="5">
          <!-- <span class="text-xs text-gray-500">销量</span>
          <span class="text-ms text-red-500">{{ item.salesCnt90d }}</span> -->
        </a-space>
      </div>
      <div class="ellipsis-2 h-11">{{ item.subject }}</div>
      <div class="h-10">
        <a-space :size="4" align="start" class="mb-4 w-full" wrap>
          <a-tag v-for="tag in item.tags" :key="tag.code" color="blue">
            {{ tag.text }}
          </a-tag>
        </a-space>
      </div>
      <div class="flex justify-between pt-10">
        <a-button size="small" @click="goLickDetail(item.detailUrl)">
          <template #icon>
            <LinkOutlined style="font-size: 12px" />
          </template>
          查看详情
        </a-button>
        <a-button
          size="small"
          type="primary"
          v-bindshop
          @click="addProduct(item)"
        >
          立即铺货
        </a-button>
      </div>
    </a-space>
    <!-- <set-add-product-box
      v-if="showAddBox"
      v-model="showAddBox"
      :select-item-list="[item.offerId]"
    /> -->
  </div>
</template>

<style scoped>
.ellipsis-2 {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
</style>
